// # qfPage组件
Vue.component("qfPage", {
  props: {
    total: {
      type: Number,
      required: true,
    },
    pagesize: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      totalPage: 0,
    };
  },
  watch: {
    // total(newdata, olddata) {}
    total: {
      handler(newdata, olddata) {
        // 4 2  2
        // 5 2  3
        this.totalPage = Math.ceil(this.total / this.pagesize);
      },
      immediate: true,
    },
  },
  template: `<div class="qf-page">
    <span @click="$emit('change-page', num)" v-for="num in totalPage">{{num}}</span>
  </div>`,
});

// # qfDialog2组件
Vue.component("qfDialog2", {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  template: `<div class="qf-dialog" v-show="visible">
    <div class="box">
      <header>
        <h2>标题</h2>
        <span @click="$emit('update:visible', false)">x</span>
      </header>
      <hr />
      <main>
        <slot></slot>
      </main>
      <hr />
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>`,
});

// # qfDialog组件
Vue.component("qfDialog", {
  template: `<div class="qf-dialog">
    <div class="box">
      <header>
        <h2>标题</h2>
        <span @click="$emit('close')">x</span>
      </header>
      <hr />
      <main>
        <slot></slot>
      </main>
      <hr />
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>`,
});

// # qfLoading2组件
Vue.component("qfLoading2", {
  template: `<div class="qf-loading2" @click="$emit('close')">
    <span>Loading...</span>
  </div>`,
});

// # qfLoading1组件
Vue.component("qfLoading1", {
  template: `<div class="qf-loading1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>`,
});

// # qfPanel组件
Vue.component("qfPanel", {
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  template: `<fieldset>
    <legend>{{title}}</legend>
    <slot></slot>
    <hr />
    <div class="footer" style="padding:10px 0;text-align:right;">
      <slot name="footer"></slot>
    </div>
  </fieldset>`,
});

// # qfButton组件
Vue.component("qfButton", {
  props: {
    type: {
      type: String,
      default: "default",
    },
    // title: {
    //   type: String,
    //   required: true,
    // },
    round: {
      type: Boolean,
      default: false,
    },
  },
  template: `<button 
    type="button" 
    :class="[
        'qf-button',
        'qf-button--'+type, 
        round ? 'is-round' : ''
    ]"
    @click="$emit('click')"
  >
    <span><slot></slot></span>
  </button>`,
});

// # qfNavBar组件
Vue.component("qfNavBar", {
  props: {
    // title: String
    title: {
      type: String,
      required: true,
    },
  },
  template: `<header class="qf-nav-bar">
    <div class="back" @click="leftClickFn">返回</div>
    <div class="title">{{title}}</div>
    <div class="search" @click="rightClickFn">搜索</div>
  </header>`,
  methods: {
    leftClickFn() {
      // console.log("左侧返回逻辑");
      this.$emit("left-click");
    },
    rightClickFn() {
      // console.log("右侧搜索逻辑");
      this.$emit("right-click");
    },
  },
});
